<!DOCTYPE html>
<html
  xmlns:th="https://www.thymeleaf.org"
  th:replace="~{layout :: html(title = '分类列表' + ' - ' + ${site.title}, content = ~{::content}, head = null)}"
>
  <th:block th:fragment="content">
    <div id="single" class="page">
      <div id="top">
        <a class="iconfont icon-left image-icon" href="javascript:history.back()"></a>
      </div>
      <div class="clone-element"></div>
      <div class="section dark-obsidian">
        <div class="article animated fadeIn">
          <div class="main animated fadeIn">
            <div class="content animated fadeIn">
              <div class="set">
                <div class="category-mask"></div>
                <!-- 自定义categories的显示名字 -->
                <h1 th:text="${theme.config.display.categoryName}"></h1>
                <ul class="category-list">
                  <li class="category-list-item" th:each="category : ${categories}">
                    <a
                      class="category-list-link"
                      th:href="${category.status.permalink}"
                      th:text="${category.spec.displayName}"
                    ></a
                    ><span class="category-list-count" th:text="${category.status.postCount}"></span>
                    <ul class="category-list-child" th:if="${not #lists.isEmpty(category.children)}">
                      <li class="category-list-item" th:each="c : ${category.children}">
                        <a class="category-list-link" th:href="${c.spec.displayName}"></a
                        ><span class="category-list-count" th:text="${c.status.postCount}"></span>
                      </li>
                    </ul>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </th:block>
</html>
